<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${survey.title }</title>
<style type="text/css">
	.mui-inline{
		vertical-align: bottom;
		font-size: 14px;
		color: #8f8f94;
	}
	.mui-icon-star{
		color: #B5B5B5;
		font-size: 22px;
	}
	.mui-icon-star-filled{
		color: #FFB400;
		font-size: 22px;
	}
	#topNav ul{
		list-style:none;
	}
	.phone{
	  	/*margin: -90px 0px;*/ 
	  	margin: 10px auto !important;
	  	float:right;
	}
	  
	.phone:before {
	    content: '';
	    width: 60px;
	    height: 10px;
	    border-radius: 10px;
	    position: absolute;
	     left:50%; 
	    margin-left: -30px;
	     background:#333; 
	    top: 50px;
	}
	  
	.phone .statusbar {
	    position: absolute;
	    width: 320px;
	    height: 20px;
	   	background:url('');
	    left: 50%;
	    margin-left: -160px;
	    top: 100px;
	    -webkit-background-size: 100% auto;
	    background-size: 100% auto;
	}
	  
	.phone:after {
	    content: '';
	    position: absolute;
	    width: 60px;
	    height: 60px;
	    left: 50%;
	    margin-left: -30px;
	    bottom: 20px;
	    border-radius: 100%;
	    box-sizing: border-box;
	    border: 5px solid #333;
	}
	.phone{
			background: #111;
			border-radius: 0px;
			box-shadow: none;
			width: 100%;
			height: 568px;
			padding: 0;
	}
	.phone {
		margin: 0 auto;
		position: relative;
		background: #111;
		border-radius: 55px;
		box-shadow: 0px 0px 0px 2px #aaa;
		width: 320px;
		height: 568px;
		padding: 105px 25px;
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
	}

	.phone iframe {
		width: 320px;
		height: 100%;
		display: block;
		width: 100%;
		margin-top: 20px;
	}
	
</style>
</head>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script src="js/jquery.min.js?v=2.1.4"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<link href="css/mui.min.css" rel="stylesheet" />
	<link href="css/layer/skin/default/layer.css" rel="stylesheet" />
    <script type="text/javascript" src="js/sort/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/sort/draggable.js"></script>

<body>
	<div class="pc_preview">
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">
			<font style="padding-left: 30%">${survey.title }</font>
			<font id="phone_preview" style="color: blue;margin-left: 30%;border-bottom:1px solid blue; cursor: pointer;">手机预览</font>
		</h1>
		<input type="hidden" id="survey_id" value="${survey.id }" />
	</header>
	<div class="mui-content">
		<c:forEach var="question" items="${questions }" varStatus="i">
			<div>
			<h5 class="mui-content-padded" id="${question.id }">第${i.index + 1 }题:${question.questionTitle }</h5>
			<c:if test="${question.questionType == 'textTitle' }">
				<div class="mui-content">
					<div class="mui-content-padded" style="margin: 5px;">
						<input type="text" class="mui-input-clear" id="${i.index + 1 }" name="${question.id }" placeholder="请输入" />
					</div>
				</div>
			</c:if>
			<c:if test="${question.questionType == 'radioTitle' }">
				<div class="mui-card">
					<form class="mui-input-group">
						<c:forEach var="answer" items="${answers }" varStatus="j">
							<c:if test="${answer.questionId == question.id }">
								<div class="mui-input-row mui-radio mui-left">
									<label>${answer.answer }</label>
									<input name="${question.id }" type="radio" id="${i.index + 1 }" value="${answer.id }" />
								</div>
							</c:if>
						</c:forEach>
					</form>
				</div>
			</c:if>
			<c:if test="${question.questionType == 'checkboxTitle' }">
				<div class="mui-card">
					<form class="mui-input-group">
						<c:forEach var="answer" items="${answers }" varStatus="j">
							<c:if test="${answer.questionId == question.id }">
								<div class="mui-input-row mui-checkbox mui-left">
									<label>${answer.answer }</label> 
									<input name="checkbox1" value="${answer.id }" class="${question.id }"  id="${i.index + 1 }" type="checkbox" />
								</div>
							</c:if>
						</c:forEach>
					</form>
				</div>
			</c:if>
			<c:if test="${question.questionType == 'scoreTitle' }">
				<div class="mui-content-padded">
					<c:forEach var="answer" items="${answers }" varStatus="j">
						<c:if test="${answer.questionId == question.id }">
							<div class="mui-inline">${answer.answer }</div>
							<div class="icons mui-inline" style="margin-left: 6px;">
								<i data-index="1" class="mui-icon mui-icon-star"></i>
								<i data-index="2" class="mui-icon mui-icon-star"></i>
								<i data-index="3" class="mui-icon mui-icon-star"></i>
								<i data-index="4" class="mui-icon mui-icon-star"></i>
								<i data-index="5" class="mui-icon mui-icon-star"></i>
								<input type="hidden" value="${answer.id }" id="answerId" />
								<input type="hidden" value="${question.id }" id="questionId" />
								<input type="hidden" value="${i.index + 1 }" id="index" />
							</div><br>
						</c:if>
					</c:forEach>
				</div>
			</c:if>
			<c:if test="${question.questionType == 'sortTitle' }">
				<div class="mui-card" style="margin-bottom: 35px;">
					<ul class="mui-table-view sortable">
						<c:forEach var="answer" items="${answers }" varStatus="j">
							<c:if test="${answer.questionId == question.id }">
								<li class="mui-table-view-cell">${answer.answer }</li>
							</c:if>
						</c:forEach>
					</ul>
				</div>
			</c:if>
			</div>
		</c:forEach>
		<div class="mui-content-padded" style="text-align: center;">
			<button type="button" class="mui-btn mui-btn-primary" data-loading-text = "提交中" data-loading-icon-position="right">确认</button>
		</div>
	</div>
	<div>
		
	</div>
	</div>
	<div style="text-align: center;">
	<font id="phone_preview" color="gray">手机效果 </font>
	
	</div>
</body>
<script type="text/javascript" charset="utf-8">
	mui.init({
	    swipeBack: true, //启用右滑关闭功能
	    gestureConfig:{
			tap: true, //默认为true
			doubletap: true, //默认为false
			longtap: true, //默认为false
			swipe: true, //默认为true
			drag: true, //默认为true
			hold: true,//默认为false，不监听
			release: true//默认为false，不监听
		}
	});
	
	$(".sortable").sortable();
	
	mui(".mui-table-view").on('hold','.mui-table-view-cell',function(){
		  
	});
	
	// 手机预览
	$('#phone_preview').on('click', function(){
		var host = window.location.host;
		var pathName = window.document.location.pathname;
		layer.open({
			  type: 2,
			  title: false,
			  area: ['385px', '900px'],
			  skin: 'layui-layer-nobg',
			  shade: 0.8,
			  closeBtn: 0,
			  shadeClose: true,
			  content: 'phone.jsp'
			});
		
		/* $.ajax({
			type : "post",
			url : "survey/showQRCode",
			data: {
				id: '${param.id}'
			},
			dataType : 'json',
			async:false,
			success : function(data) {
				layer.open({
					  type: 1,
					  title: false,
					  closeBtn: 0,
					  area: '120px',
					  skin: 'layui-layer-nobg', //没有背景色
					  shadeClose: true,
					  content: '<img length="120px" width="120px" src="' + data.success + '" />'
					});
			},
			error:function(){
				alert('failed');
			}
		}); */
		
	});
	
	//应用评分
	mui('.icons').on('tap','i',function(){
	  	var index = parseInt(this.getAttribute("data-index"));
	  	var parent = this.parentNode;
	  	var children = parent.children;
	  	if(this.classList.contains("mui-icon-star")){
	  		for(var i=0;i<index;i++){
 				children[i].classList.remove('mui-icon-star');
 				children[i].classList.add('mui-icon-star-filled');
	  		}
	  	}else{
	  		for (var i = index; i < 5; i++) {
	  			children[i].classList.add('mui-icon-star')
	  			children[i].classList.remove('mui-icon-star-filled')
	  		}
	  	}
	  	starIndex = index;
 	});
	
	var ua = navigator.userAgent;
	var uaArray = ua.split('/');
	var imei = uaArray[uaArray.length - 1];
	mui.toast(imei);
	
	mui(document.body).on('tap', '.mui-btn', function(e) {
		var survey_id = $('#survey_id').val();
	    // 获取数据
	    mui(this).button('loading');
	    var currentObj = this;
	    var obj = '';
	    var flag = false;	// 是否有未填标志（TRUE-->有）
	    $('input').each(function(){
	    	var str = '{';
	    	if (this.type == 'text') {
	    		if (this.value == null || this.value == '') {
	    			$(this).parent().parent().parent().css("color","#EC6C00");
	    			$('#' + this.name).css("color","#EC6C00");
	    			flag = true;
	    			return true;
				} else {
					$(this).parent().parent().parent().css("color","#000");
	    			$('#' + this.name).css("color","#8F8F94");
				}
				str += '"survey_id":"' + survey_id + '", ';
				str += '"question_no":"' + this.id + '", ';
				str += '"question_id":"' + this.name + '", ';
				str += '"question_type":"text", ';
				str += '"answer":"' + this.value + '", ';
			} else if(this.type == 'radio'){
				if (!$("input[name='" + this.name + "']").is(':checked')) {
					$(this).parent().parent().parent().parent().css("color","#EC6C00");
					$('#' + this.name).css("color","#EC6C00");
					flag = true;
					return true;
				} else {
					$(this).parent().parent().parent().css("color","#000");
	    			$('#' + this.name).css("color","#8F8F94");
				}
				str += '"survey_id":"' + survey_id + '", ';
				str += '"question_no":"' + this.id + '", ';
				str += '"question_id":"' + this.name + '", ';
				str += '"question_type":"radio", ';
				str += '"answer":"' + this.value + '", ';
			} else if(this.type == 'checkbox'){
				if (!$("input[class='" + this.className + "']").is(':checked')) {
					$(this).parent().parent().parent().parent().css("color","#EC6C00");
					$('#' + this.className).css("color","#EC6C00");
					flag = true;
					return true;
				} else {
					$(this).parent().parent().parent().css("color","#000");
	    			$('#' + this.className).css("color","#8F8F94");
				}
				str += '"survey_id":"' + survey_id + '", ';
				str += '"question_no":"' + this.id + '", ';
				str += '"question_id":"' + this.className + '", ';
				str += '"question_type":"checkbox", ';
				str += '"answer":"' + this.value + '", ';
			}
	    	str += '}';
	    	obj += str + ';';
	    });
	    // 评分
	    $('.icons').each(function(){
	    	var score = $(this).find('.mui-icon-star-filled').length;
	    	if(score == 0){
	    		$(this).parent().prev().css('color','#EC6C00');
	    		$(this).prev().css('color','#EC6C00');
	    		flag = true;
				return true;
	    	} else {
	    		// 判断是否当前题目下 所有的评分题都已经有评分
	    		var allFlag = true;
	    		$(this).parent().find('.icons').each(function(){
	    			if($(this).find('.mui-icon-star-filled').length == 0){
	    				allFlag = false;
	    			}
	    		});
	    		if (allFlag) {
					$(this).parent().prev().css("color","#8F8F94");
				}
	    		
				$(this).prev().css("color","#000");
			}
	    	var str = '{';
	    	str += '"survey_id":"' + survey_id + '", ';
			str += '"question_no":"' + $(this).find('#index').val() + '", ';
			str += '"question_id":"' + $(this).find('#questionId').val() + '", ';
			str += '"question_type":"score", ';
			str += '"answer":"' + $(this).find('#answerId').val() + '||' + score + '", ';
	    	str += '}';
	    	obj += str + ';';
	    });
	    obj = obj.substr(0, obj.length - 1);
	    if (flag) {
	    	mui.toast('请填写完整！');
	    	mui(currentObj).button('reset');
			return false;
		}
	    // ajax保存数据
	    mui.toast('成功！由于本次提交处于预览状态，所以不会记录到调查结果里。');
	    setTimeout(function() {
			mui(currentObj).button('reset');
		},2000);
	});
</script>
</html>